<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-02 12:05:01
 * @LastEditTime : 2023-10-31 19:43:05
-->
<script lang="ts" setup name="IkStatu">
import type { PropType } from 'vue'
type TType = 'success' | 'warning' | 'info' | 'danger'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  type: {
    type: String as PropType<TType>,
    default: 'success'
  },
  // 传了type时，color和background不生效
  // 文字颜色
  color: {
    type: String,
    default: ''
  },
  // 背景色
  background: {
    type: String,
    default: ''
  },
  effect: {
    type: String as PropType<'dark' | 'light' | 'plain'>,
    default: 'light'
  },
  circle: {
    type: Boolean,
    default: false
  },
  // 预留参数
  circleW: {
    type: Number,
    default: 8
  },
  // 预留参数
  circleH: {
    type: Number,
    default: 8
  },
  borderWidth: {
    type: Number,
    default: 1
  },
  borderType: {
    type: String as PropType<'solid' | 'dashed' | 'dotted'>,
    default: 'solid'
  }
})
const tagStyle = computed(() => {
  return props.type
    ? ''
    : {
        color: props.color,
        backgroundColor: props.background,
        border: 'none'
      // borderColor: props.color
      }
})
</script>

<template>
  <!-- <div :style="{ border: `${borderWidth}px ${borderType} ${comColor}` }">
    <span :style="{ backgroundColor: comColor }"></span>
    <p>{{ title }}</p>
  </div> -->
  <el-tag
    :effect="effect"
    class="ik-statu-tag"
    :type="type"
    :style="tagStyle"
  >
    <span
      v-if="circle"
      class="inline-block rounded-full"
      :style="{
        backgroundColor: `var(--el-color-${type})`,
        width: `${circleW}px`,
        height: `${circleH}px`,
      }"
    ></span>
    {{ title }}
  </el-tag>
</template>

<style lang="scss" scoped>
.ik-statu-tag {
  margin: 5px 0;

  &:not(:first-child) {
    margin-left: 5px;
  }
}
</style>
